<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/appendPlot.css">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=29dosuZrFUdGIC1SfyBGWwm01RW6M5Qx"></script>
    <title>添加小区</title>
</head>
<body style="background:#f1f5f8;">
    <div id="box">
        <div class="oForm">
            <!-- 地区选择  -->
            <form class="form-inline">
                <div class="form-group">
                    <label for="exampleInputEmail2">省/直辖市</label>
                    <select>
                        <option value="">上海</option>
                        <option value="">江西</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail2">市</label>
                    <select>
                        <option value="">上海</option>
                        <option value="">江西</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail2">县/区</label>
                    <select>
                        <option value="">上海</option>
                        <option value="">江西</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail2">所属商圈</label>
                    <select>
                        <option value="">上海</option>
                        <option value="">江西</option>
                    </select>
                </div>
            </form>
            <!-- 物业小区简介 -->
            <form class="form-horizontal">
                <div class="oLef">
                    <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">物业公司</label>
                            <div class="col-sm-10">
                            <input class="form-control" id="inputEmail3">
                            </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">小区名称</label>
                        <div class="col-sm-10">
                        <input class="form-control" id="inputPassword3">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">维护人员</label>
                        <div class="col-sm-10">
                        <input class="form-control" id="inputEmail3">
                        </div>
                    </div>
                </div>
                <div class="oRig">
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">经度</label>
                        <div class="col-sm-10">
                        <input class="form-control" id="inputPassword3">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">纬度</label>
                        <div class="col-sm-10">
                        <input class="form-control" id="inputPassword3">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">详细地址</label>
                        <div class="col-sm-10">
                        <input class="form-control" id="inputPassword3">
                        </div>
                    </div>
                </div>
            </form>
            <!-- 地图展示 -->
            <div id="allmap"></div>
        </div> 
        <!-- 多选功能功能以及文字图片上传-->
        <form class="checkBox">
            <!-- 多选框 -->
            <div class="checkForm">
                <span>小区宣传标示</span>
                &nbsp;&nbsp;
                <input type="checkbox" name="vehicle" value="Bike" /><label for="">文字</label>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <input type="checkbox" name="vehicle" value="Car"/><label for="">图片</label>
            </div>
            <!-- 文字上传 -->
            <div class="fontBox">
                <span>文字</span>
                <textarea cols="60" rows="10"></textarea>
            </div>
            <!-- 图片上传 -->
            <div class="fontBox2" style="overflow:hidden;margin-top:20px">
                <span class="fontBox_img" style="float:left">图片</span>
                <span class="fontBox_watch" style="float:left;margin-left:8px">预览</span>
                <input class="fontBox_file" type="file" value="上传" style="float:left;margin-left:8px">
            </div>
            <!-- 展示图片 -->
            <div style="width:100px;height:100px;border:1px solid black;margin-top:8px">pic</div>
            <button style="color:white;background:rgb(74, 134, 223);width:200px;height:35px;border-radius:5px;margin-left:20%">确认添加</button>
        </form>
    </div> 

    <script src="./js/jquery-3.2.0.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script>
        // 百度地图API功能
            var map = new BMap.Map("allmap");
            var point = new BMap.Point(116.331398,39.897445);
            map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
            map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
            map.centerAndZoom(point,12);

            function myFun(result){
                var cityName = result.name;
                map.setCenter(cityName);
                // alert("当前定位城市:"+cityName);
            }
            var myCity = new BMap.LocalCity();
            myCity.get(myFun);  
    </script>
</body>
</html>